// controls
.ui--controls {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;

	padding: 0.5rem 0.5rem;

	font-size: 0.875rem;
	line-height: 1;

	transition: all 300ms ease;
	transform: translateY( 100% );

	.visible--ui-controls & {
		transform: translateY( 0 );
	}
}

.ui-toggle--controls {
	position: absolute;
	right: 0;
	top: 0;

	display: block;
	margin: -2.25em 1rem 0 0;

	text-transform: uppercase;
	color: inherit;

	opacity: 0.5;

	&::before {
		content: ' ';

		position: relative;
		top: 0.1em;

		display: inline-block;
		width: ( 12 / 14 * 1em );
		height: ( 12 / 14 * 1em );
		margin: 0 0.25em 0 0;

		border: 1px solid currentColor;
		border-radius: 50%;
	}

	&:hover {
		.animation--blink;
	}

	.visible--ui-controls & {
		opacity: 1;

		&::before {
			background: @color--text;
		}
	}
}


// control buttons
.button-row {
	display: flex;
}

.control-button {
	.button;

	flex-grow: 1;
	height: 4rem;
	margin: 0.5rem;
	padding: 0.65rem 0.7rem;

	&:hover {

	}
}

.control-button--narrow {
	flex-grow: 0;
	flex-shrink: 0;
	width: 4rem;
}

.control-button--no-feedback {

	&:active,
	&.active {
		background: rgba( 255,255,255,1 );
	}

	&.active {
		color: @color--bg;
	}
}


@media screen and ( max-width: 764px ) {
	.control-button {

	}

	.control-button--narrow {
		width: auto;
	}
}


@media screen and ( max-width: 656px ) {
	.control-button {
		flex-shrink: 1;
		flex-grow: 1;
	}

	.control-button--narrow {
		flex-shrink: 1;
		flex-grow: 1;
	}
}


@media screen and ( max-width: 460px ) {
	.button-row {
		flex-wrap: wrap;
	}

	.control-button {
		min-width: ~'calc( 20vw - 1.5rem )';
	}

	.control-button--narrow {
		min-width: ~'calc( 20vw - 1.5rem )';
	}
}


@media screen and ( max-height: 480px ) {
	.button-row {

	}

	.control-button {
		height: 3rem;
	}

	.control-button--narrow {
		// height: 2rem;
	}
}
